<!DOCTYPE html>
<html lang="zh-CN" ng-app="app" ng-controller="goodsDetail">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>详情页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../css/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../css/goods-detail.css" rel="stylesheet"/>
    <script src="../js/jquery.js"></script>
     <script src="../js/angular.min.js"></script>
	<script src="../js/angular-route.min.js"></script>
	<link rel="stylesheet" href="../js/slick/slick.css"/>
	<script src="../js/slick/slick.min.js"></script>
	<script src="../js/global.js"></script>
	<script src="../js/pub/goodsDetail.js"></script>
	<script src="../js/audit.queue.js"></script>
</head>
<body>
    <!--头部-->
        <div class="topper">
            <div class="wrapper">
                <div class="left-bar">
                    <div class="back-home divider">
                        <em></em><a href="index.html">商城首页</a>
                    </div>
                    <div class="item"><a href="">商家中心</a></div>
                </div>
                <div class="right-bar">
                    <div class="login-user sub-menu">
                        <a class="menu-hd" href="">{{username}}<em></em></a>
                        <div class="down">
                            <a href="">内容</a>
                            <a href="">内容</a>
                            <a href="">内容</a>
                        </div>
                    </div>
                    <div class="item"><a href="uc-msg.html">消息（<span class="txt-theme">0</span>）</a></div>
                    <div class="logout divider"><a href="javascript:void(0)" ng-click="logout()">退出</a></div>
                    <span class=""></span>
                    <div class="cart"><em></em><a href="../wgc/cart">购物车</a></div>
                    <div class="order"><em></em><a href="uc-order.html">我的订单</a></div>
                    <div class="fav"><em></em><a href="../wdsc/wdsc">我的收藏</a></div>
                    <div class="help"><em></em><a href="help.html">帮助中心</a></div>
                </div>
            </div>
        </div>
        <div class="shop-header wrapper">
            <div class="logo">
                <a href="index.html"><img src="../img/logo.png" alt="logo" /></a>
            </div>
            <div class="shop-schbox">
                <div class="layout">
                        <button class="search-btn shop">校园租车</button>
                </div>
            </div>
        </div>
        <div class="shop-nav-box">
            <div class="shop-nav wrapper">
                
                
            </div>
        </div>
    <!--头部-->

    <div class="wrapper">
        <div class="detail-top clearfix">
            <div class="detail-goods">
                <div class="detail-show">
                    <div class="origin-show">
                        <div class="zoomup"></div>
                        <img class="big-pic" ng-src="../uploads/{{img}}"  />
                    </div>
                      
                    <div class="zoom-show">
                        <img src="" alt="" />
                    </div>
                </div>
                <div class="detail-info">
                    <div class="item-title">{{xm}}</div>
                    <div class="item-price">
                        <span class="now">￥{{price}}/天</span><br/>
                    </div>
                    <div class="item-price">
                        <span>{{de}}</span>
                    </div><br/><br/>
                    <div class="sku-info">
                        
                        <div class="prop">
                            <div class="dt">数量：</div>
                            <div class="dd">
                                <div class="mod-numbox chose-num" data-max="5">
                                    <span class="count-minus"></span>
                                    <input class="count-input" value="1"  type="text" id="num" />
                                    <span class="count-plus"></span>
                                </div>
                                <span>（限租5辆）</span>
                                <div class="stock">(库存{{num}}辆)</div>
                            </div>
                        </div>
                    </div>
                    <div class="item-action">
                        <a href="javascript:void(0)" class="buy-now" ng-click="rent()">立即租车</a>
                        <a href="javascript:void(0)" class="add-cart" ng-click="addGwc()">加入购物车</a>
                    </div>
                    <div class="item-extend">
                  <a href="javascript:void(0)" ng-click="shouCang()" class="fav"><i class="iconfont icon-star"></i>{{sc}}</a>
                       
                       <!--  <a href="" class="fav">已收藏</a> -->
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="detail-bottom clearfix">
             <div class="detail-main">
                <div class="detail-tabs">
                    <a class="item" href="javascript:;">详情描述</a>
                </div>
                <div class="tab-con">
                    <div class="mod-type-cont">
                        <img style="margin-left: 200px" src="../uploads/{{img}}" alt="" />
                    </div>
                     <div class="detail-stand">
                        <div class="tit">主体规格参数</div>
                        <div class="attr">
                            <div class="name">车架类型</div>
                            <div class="value">{{cjlx}}</div>
                        </div>
                        <div class="attr">
                            <div class="name">车架材质</div>
                            <div class="value">{{cjcz}}</div>
                        </div>
                        <div class="attr">
                            <div class="name">轮径尺寸</div>
                            <div class="value">{{ljcc}}</div>
                        </div>
                        <div class="attr">
                            <div class="name">速别</div>
                            <div class="value">{{sb}}</div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">
    		    山西XXX技术学院     版权所有 PreCheng © 2016-2018   
    </div>
    <!--脚部-->
</body>



<script >
    $(function () {

        +function () {
            var index=0,
            bsrc='',
            timer=null,
            box=$('.detail-show'),
            origin=$('.origin-show'),
            bigimg=box.find('.big-pic'),
            tumb=box.find('.thumb-show'),
            tumbItem=tumb.find('.item'),
            zoomup=box.find('.zoomup'),
            zoomshow=box.find('.zoom-show');

            /*图片切换*/
            tumbItem.on('mouseenter',function () {
                index=$(this).index();
                clearTimeout(timer);
                timer=setTimeout(function (){
                    update(index);
                }, 300)

            });

            function update (index) {
                bsrc=tumbItem.eq(index).find('.s-pic').attr('bsrc');
                bigimg.attr('src', bsrc);
                tumbItem.find('.s-pic').removeClass('active').end().eq(index).find('.s-pic').addClass('active');
            }

            update(index);

            if ($('.detail-show .thumb-show .item').length>5) {
                $('.detail-show .thumb-show').slick({
                    slidesToShow: 5,
                    infinite:false
                });
            }

            /*放大镜*/
            origin.on('mouseover mouseout',function (e) {
                if (e.type=="mouseover") {
                    var oX=$(this).offset().left,
                    oY=$(this).offset().top,
                    zX=e.pageX,
                    zY=e.pageY,
                    pW=$(this).outerWidth(),
                    pH=$(this).outerHeight(),
                    zW=zoomup.outerWidth(),
                    zH=zoomup.outerHeight(),
                    scale=pW/zW,
                    zsW=zoomshow.width()*scale,//放大后的宽度
                    factor=zsW/pW

                    zoomshow.find('img').attr('src',bigimg.attr('src')).width(zsW);

                    $(document).on('mousemove.zoom',function (e) {
                        zX=e.pageX-oX- zW/2;
                        zY=e.pageY-oY- zH/2;
                        move();
                    });

                    function move () {
                        zX=zX<=0?0:zX;
                        zX=zX>=pW-zW?pW-zW:zX;
                        zY=zY<=0?0:zY;
                        zY=zY>=pH-zH?pH-zH:zY;
                        zoomup.show().css({top:zY,left:zX});
                        zoomshow.show().find('img').css({top:-zY*factor,left:-zX*factor});
                    }
                }
                else {
                    $(document).off('mousemove.zoom');
                     zoomup.hide()
                     zoomshow.hide();
                }
            });
        }();

        $('.mod-numbox').goodsCount(); //数量加减

        $('.detail-main').zTab({
            tabnav:'.detail-tabs',
            trigger:'click'
        });
    });
</script>
</html>